/*
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
*/
@import url("tools/typography.css");

:host {
  display: block;
}

.input-upload {
  display: none;
}

.uploader-inner {
  align-items: flex-start;
  display: flex;
  gap: var(--spacing-20);
  margin-block-start: var(--spacing-8);
}

.preview-wrapper {
  position: relative;

  &:hover {
    & tg-ui-avatar {
      opacity: 60%;
    }

    & .remove-image-button {
      visibility: visible;
    }
  }
}

.remove-image-button {
  --btn-size: 32px;

  inset-block-start: calc(50% - var(--btn-size) / 2);
  inset-inline-start: calc(50% - var(--btn-size) / 2);
  position: absolute;
  visibility: hidden;
}

.uploader-explanation {
  @mixin font-small;

  color: var(--color-gray70);
  line-height: 1.5;
}

.uploader-button {
  margin-block-start: var(--spacing-8);
}

tg-ui-error {
  display: block;
  margin-block-start: var(--spacing-8);
}
